<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="popBox">
				<u-cell-group :border="false">
					<u-cell :border="false">
						<view slot="title">
							<text class="popTitle">{{title}}</text>
						</view>
						<view slot="value">
							<u-icon name="close" color="#000" @click="cancel"></u-icon>
						</view>
					</u-cell>
					<view v-if="type==='pay'">
						<u-cell :border="false">
							<view slot="title">
								<text class="body_text">已选手机</text>
							</view>
							<view slot="value">
								<span class="right_text">{{numPhone}}</span>
							</view>
						</u-cell>
						<u-cell :border="false">
							<view slot="title">
								<text class="body_text">缴费时间</text>
							</view>
							<view slot="value">
								<!-- <div class="border_box"><span class="right_text">4</span>/月</div> -->
								<u-input v-model="month" style="width: 150rpx;">
									<template slot="suffix">
										<text>/月</text>
									</template>
								</u-input>
							</view>
						</u-cell>
						<u-cell :border="false">
							<view slot="title">
								<text class="body_text">支付金额</text>
							</view>
							<view slot="value">
								<span class="right_text">{{amount}}</span>
							</view>
						</u-cell>
						<u-cell :border="false">
							<view slot="title">
								<text class="body_text">支付方式</text>
							</view>
							<view slot="value">
								<u-radio-group v-model="payType" placement="row" @change="groupChange">
									<u-radio v-for="(item, index) in payTypeList"
										style="margin-left: 10px;font-weight: 600;color: #000000;" labelSize="16px"
										:key="index" :label="item.name" :name="item.id">
									</u-radio>
								</u-radio-group>
							</view>
						</u-cell>
						<u-cell :border="false" label="默认选中，可取消，设置成功后不再显示">
							<view slot="title">
								<text class="body_text">开通免密支付</text>
							</view>
							<view slot="value">
								<u-checkbox-group shape="circle" v-model="nPay" placement="column"
									@change="handleChagePay">
									<u-checkbox label="" name="2">
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</u-cell>
					</view>
					<view v-else style="font-weight: bold;">
						<u-cell class="body_text" title="账号信息修改" :isLink="true" :border="false" url="/pages/edittaskphone/edittaskphone"></u-cell>
						<u-cell class="body_text" title="任务修改" :isLink="true" :border="false" :url="`/pages/taskList/taskList?phoneId=${phoneId}&title=任务列表`"></u-cell>
						<u-cell class="body_text" title="保留APP列表" :isLink="true" :border="false" :url="`/pages/taskList/taskList?phoneId=${phoneId}&title=保留APP列表`"></u-cell>
					</view>
				</u-cell-group>
			</view>
			<view class="footer_box" v-if="type==='pay'">
				<u-button shape="circle" text="确定续费" @click="goToRenew()" color="#01B5FC"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getRenew
	} from '@/api/api.js'
	export default {
		name: "payPopup",
		props: {
			type: {
				default: 'pay'
			},
			title: {
				default: '续费信息确认'
			},
			numPhone: {
				default: 0
			},
			phoneId:{
				default:''
			}
		},
		data() {
			return {
				show: false,
				payMap: null,
				payTypeList: [{
						name: '支付宝',
						id: 0
					},
					{
						name: '微信',
						id: 1
					},
				],
				payType: 0,
				nPay: [],
				month: 0,
				renewData: [],
				amount: 0,
			};
		},
		watch: {
			month(n, o) {
				this.amount = n * 30
			}
		},
		methods: {
			async goToRenew() {
				const confing = {
					phone: '19700001258',
					id: this.$store.state.user.id,
					month: this.month,
					amount: this.amount,
					payUrl: 'https://assistantdy.oss-cn-shanghai.aliyuncs.com/prod/system/20230605/2b4a4507513a7820ce539371eb91da52.jpg'
				}
				getRenew(confing).then(res => {
					if (res.code === 10000) {
						this.show = false
					} 
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			groupChange() {

			},
			handleChagePay(value) {

			},
			cancel() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss">
	.popTitle {
		font-size: 18px;
		font-weight: 600;
		color: #000000;
	}

	.popBox {
		padding: 10px;
		background-color: #fff;
	}

	.body_text {
		font-size: 16px;
		color: #656565;
	}

	.right_text {
		@extend .body_text;
		color: #000;

	}

	.border_box {
		@extend .body_text;
		border: 1px solid #656565;
		padding: 2px 6px;
	}

	.footer_box {
		padding: 0 0.8rem 0.8rem;
	}
</style>